<template>
  <div class="user">
    <!-- 面包屑 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">返回</el-breadcrumb-item>
      <el-breadcrumb-item>个人中心</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="user-info">
      <!-- 这里可能是svg哈 -->
      <div class="user-avatar-svg" v-if="avatarSvg" v-html="user.userimg"></div>
      <img src="./avatar.jpg" alt="" v-else />
      <div>
        <p class="username">{{ user.username }}</p>
        <p>
          <img src="./1.png" alt="" />
          <img src="./2.png" alt="" />
          <img src="./3.png" alt="" />
          <span style="background-color: #fc5531">勋</span>
          <span style="background-color: #ae42fe">章</span>
          <span style="background-color: #2fb9fe">墙</span>
        </p>
        <div class="VIP">
          <i class="vip-icon"></i
          ><span>文档超级会员，100+尊享特权-超大空间-海量资源</span>
        </div>
      </div>
    </div>

    <div class="user-more">
      <div>
        <p>账户余额</p>
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
      </div>
      <div>
        <p>云空间</p>
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
      </div>
      <div>
        <p>AI文档助手</p>
        <p>xxx</p>
        <p>xxx</p>
        <p>xxx</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ArrowRight } from "@element-plus/icons-vue";

let user = JSON.parse(sessionStorage.getItem("user"));
console.log(user);
// 判断是否为vip
const vip = user.vip;

// 判断头像是否为 svg 格式
const avatarSvg = user.userimg.includes("svg");
</script>

<style lang="less" scoped>
.user {
  /deep/.el-breadcrumb {
    padding: 10px 0 20px 0;
    border-bottom: solid 1px #f3f5f7;
  }
  padding: 20px;
  &-info {
    display: flex;
    padding: 10px 0;
    margin: 20px;
    & > img,
    .user-avatar-svg {
      height: 150px;
      width: 150px;
      cursor: pointer;
      border-radius: 50%;
    }
    & > div {
      padding-left: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;

      .username {
        font-size: 18px;
        font-weight: 700;
      }

      p {
        display: flex;
        img {
          width: 25px;
          height: 25px;
          margin-right: 10px;
          cursor: pointer;
        }
      }
      p span {
        cursor: pointer;
        color: #fff;
        margin-right: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 25px;
        height: 25px;
        border-radius: 4px;
      }
      .VIP {
        span {
          user-select: none;
          border-bottom: solid transparent 1px;
          transition: all 0.3s;
        }
        &:hover {
          span {
            border-bottom: solid 1px #69421b;
          }
        }
        cursor: pointer;
        color: #69421b;
        padding: 4px 10px;
        background: linear-gradient(270deg, #f8c883, #fae8d0);
        border-radius: 16px;
        .vip-icon {
          height: 25px;
          width: 25px;
          background: url()
            50% no-repeat;
          background-size: cover;
        }
        display: flex;
        align-items: center;
      }
    }
  }

  &-more {
    margin: 10px;
    display: flex;
    & > div {
      padding: 10px;
      height: 120px;
      border: solid #f3f5f7 1px;
      width: calc(100% / 3 - 20px);
      margin: 0 10px;
    }
  }
}
</style>
